<template>
	<view class="content">
		<!-- 返回主页 -->
		<view class="back" @click="close">
			<view class="backicon"></view>
		</view>
		<view class="toptitle">
			<text>快捷考勤</text>
			<view style="font-size: 30rpx;line-height: 70rpx;">左滑可查看请假信息</view>
		</view>
		<u-popup :show="show" :round="30" @close="close" closeOnClickOverlay
			overlayOpacity=0 duration=800>	
			<view style="height: 1370rpx;">
				
				<view class="top">
					<view mode="selector" style="display: inline-block;height: 100%; margin-left: 20rpx;" v-if="!flag">
						<view style="margin-left: 20rpx;font-size: 40rpx;font-weight: bold; float: left;
							margin-top: 30rpx;color: #6b6b6a;" @click="showtj=!showtj">
							<text>考勤信息</text>
						</view>
					</view>
					
					<view style="display: inline-block; float: right;margin-right: 50rpx;margin-top: 20rpx;">
						<button @click="confirm()" :disabled="flag" size="mini" plain="true" 
							class="top-btn" style="color: black;border: 4rpx solid #6b6b6a; border-radius: 25rpx;
							 color: #6b6b6a;">提交</button>
					</view>
				</view>
				<view class="footer">
						<text class="footer-info">应到:{{needcount}}</text>
						<text class="footer-info">实到:{{arrivecount}}</text>
						<text class="footer-info">需选择旷课和请假人数:{{nocount}}</text>	
				</view>
				<view v-if="flag">
					<view style="margin-top: 60%; width: 100%;text-align: center;">
						<text style="font-weight: bolder;font-size: larger;text-align: center;">暂无信息</text>
					</view>
				</view>
				<view style="margin-top: 30rpx;" v-else>
					<u-list height="1180rpx">
						<u-swipe-action>
							<u-list-item >
								<u-swipe-action-item :options="options1" v-for="(student, index) in students" :key="index" @click="openPop(student)" >
									<view class="info">
										<view class="info-top">
											<text style="display: inline-block;margin-right: 30rpx;">{{student.sname}}</text>
											<text>{{student.stuid}}</text>
											<view style="display: inline-block;float: right;margin-right: 20rpx;">
												<text v-if="student.status == 1" style="color: #19BE6B;">已到</text>
												<text v-if="student.status == 2" style="color: #4786FF;">请假</text>
												<text v-if="student.status == 5" style="color: #FE315D;">旷课</text>
											</view>
										</view>
										<view style="margin-top: 12rpx;float: right;">
											<button @click="modifyStatus(student, 1)" size="mini" class="btn-u" plain="true"
												style="color: #19BE6B;border: 4rpx solid #19BE6B;border-radius: 25rpx;" 
												hover-class="btn-hover">已到</button>
												<button @click="modifyStatus(student, 2)" size="mini" class="btn-u" plain="true"
													style="color: #ffef35;border: 4rpx solid #ffff00;border-radius: 25rpx;" 
													hover-class="btn-hover">请假</button>
											<button @click="modifyStatus(student, 5)" size="mini" class="btn-u" plain="true"
												style="color: #FE315D;border: 4rpx solid #FE315D;border-radius: 25rpx;" 
												hover-class="btn-hover">旷课</button>	
										</view>
									</view>
									</u-swipe-action-item>
									<u-popup mode="bottom" :show="showLeave" @close="closeLeave" @open="openLeave"
										overlayOpacity="0.1" closeable>
										<view style="height: 80%;">
											<view style="width: 100%;">
												<view style="padding-left: 5%;padding-top: 3%;">
													<view style="text-align: center;">
														<text style="font-weight: bolder;color: #6b6b6a;">请假信息</text>
													</view>
													<view style="margin-top: 5%;">
														<text style="font-weight: bolder;">请假时间:</text>
														<view>
															<text style="font-weight: bolder;">{{leaveInfo.time}}</text>
														</view>
													</view>
													<view style="margin-top: 5%;">
														<text style="font-weight: bolder;">请假原因:</text>
														<view>
															<textarea maxlength="200" disabled="true"  cols="30" style="" :value="leaveInfo.reason"></textarea>
														</view>
													</view>
												</view>
											</view>
											<view style="margin-top: 10%;">
												<u--image :showLoading="true" :src="src" width="100%" @click="previewImage(src)"></u--image>
											</view>
										</view>
									</u-popup>
							</u-list-item>
						</u-swipe-action>	
					</u-list>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
import { HNIT_URL, IDENTITY } from '../../../constants';
	export default {
		data() {
			return {
				options1: [{
                    text: '请假信息',
                    style: {
                        backgroundColor: '#3c9cff'
                    }
                }],
				showtj:false,
				showclasspicker:false,
				show:true,
				students:[],
				username: "",
				index: 0,
				classesInfo: {},
				cid:0, //班级编号默认为0
				classes: [[]],
				// 已到总人数
				arrivecount: 0,
				needcount:0, //应到人数
				nocount: 0,  //未到人数
				attid: 0,
				records:[],
				reClocking: [],
				flag : false,
				clocingShow : false,
				colorStyle:{
					color: '#A9E08F'
				},
				showLeave: false,
				src: "https://cdn.uviewui.com/uview/album/1.jpg",
				leaveInfo:{
					time: "",
					reason: "",
					imagepath: 'https://cdn.uviewui.com/uview/album/1.jpg'
				}
			}
		},
		mounted(){
			this.username = uni.getStorageSync("name");
			this.queryStudents();
		},
		methods:{
			previewImage(src){
				let srcList = [];
				srcList.push(src)
				uni.previewImage({
					urls: srcList
				})
			},
			// 打开弹框
			openPop(student){
				if(!student.leaveId || student.status != 2){
					uni.showToast({
						title: "该学生未请假",
						icon:"none",
						duration: 2000
					})
					return;
				}
				this.$request.get(HNIT_URL + "wx/leave/get/" + student.leaveId).then(res=>{
					this.leaveInfo = res.data;
					this.leaveInfo.time =  this.leaveInfo.requestStart + " ~ " + this.leaveInfo.requestEnd;
					this.src = HNIT_URL + "uploadfile/" + this.leaveInfo.imagepath.replaceAll(/\\/g, "/");
				})
				this.showLeave = true;
			},
			openLeave(){

			},
			// 关闭弹框
			closeLeave(){
				this.showLeave = false;
			},
			// 关闭选择器
			cpicker(){
				this.clocingShow = false
			},
			// 返回上一页
			close() {
				let lthis=this;
				if(!this.flag){
				wx.showModal({
				    title: "温馨提示", // 提示的标题
				    content: "确认提交考勤名单", // 提示的内容
				    showCancel: true, // 是否显示取消按钮，默认true
				    cancelText: "取消", // 取消按钮的文字，最多4个字符
				    cancelColor: "#000000", // 取消按钮的文字颜色，必须是16进制格式的颜色字符串
				    confirmText: "确定", // 确认按钮的文字，最多4个字符
				    confirmColor: "#576B95", // 确认按钮的文字颜色，必须是 16 进制格式的颜色字符串
				    success: function (res) {
				        if (res.confirm) {
							lthis.confirm();
							setTimeout(res=>{
								uni.reLaunch({
									url: '/pages/student/home/index'
								});	
							},3000)
				        } else if (res.cancel) {}
				    }
				})
				}
				uni.reLaunch({
					url: '/pages/student/home/index'
				});	
			},
			
			cancel(){
				this.clocingShow = false;
			},
			//查询该班级的学生
			queryStudents(){
				// 查询班级的id
				this.$request.get(HNIT_URL + "wx/classInfo/getCname/" + this.username).then(res=>{
					if(res.code == 0){
						this.flag = true;
						uni.showToast({
							title:res.msg,
							icon:"none",
							duration:3000
						})
					}else{
						if(res.data.attendance!=null){
							this.attid = res.data.attendance.id;
							this.arrivecount = res.data.attendance.arrivedcount;
						}
						this.students = res.data.studentInfoList;
						//默认学生已经到达,未到人数 nocount = 实到-应到
						this.students.forEach(student=>{
							this.needcount++;
							student.status = 1;
							if(student.leaveId){
								student.status = 2;
							}
						})
						this.nocount = this.needcount - this.arrivecount;
					}
				})
			},
			// 修改学生考勤状态
			modifyStatus(student, status){
				
				//学生的状态如果和选中的状态相同就return
				if(student.status == status){
					return;
				}
				if(student.status==2&&status==5){
					student.status = status;
					this.$forceUpdate()
					return 
				}
				if(student.status==5&&status==2){
					student.status=status;
					this.$forceUpdate()
					return 
				}
				
				
				
				//未到人数小于等于0,则不允许再继续选
				if(this.nocount<=0&&status==5){
					return;
				}
				//status==2为旷课
				if(this.nocount<=0&&status==2){
					return;
				}
				
				//选择状态为1(已到),学生状态为5,未到人数加一
				if(status == 1 ){
					this.nocount++;
				//选择状态为(缺勤),学生状态为1,未到人数减一
				}else if(status == 5&&student.status!=2){
					this.nocount--;
				}else if(status==2&&student.status!=5){
					this.nocount--;
				}
				student.status = status;
				this.$forceUpdate()
			},
			// 提交考勤信息
			confirm(){
				if( this.nocount != 0 && this.nocount>0){
					uni.showToast({
						title:"还剩"+this.nocount+"人未选择",
						icon:"none",
						duration:2000
					})
					return;
				}
				if(this.students.length <= 0 || this.attid == 0){
					uni.showToast({
						title:"暂未发布考勤信息",
						icon:"none",
						duration:2000
					})
					return;
				}
				//考勤详情数组
				this.records = [];
				//生成考勤详情记录
				this.students.forEach(student => {
					let record = {
						attid : this.attid,
						stuid : student.stuid,
						leaveid : student.leaveId,
						status : student.status
					}
					this.records.push(record);
				})
				//添加考勤详情
				uni.request({
					url: HNIT_URL + "wx/records/modify/" + this.username ,
					method: 'post',
					data: this.records,
					header: {
						'Content-Type': 'application/json'
					},
					success: function(res) {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000    //持续时间为 2秒
					})
					if(res.data.code){
						setTimeout(res=>{
							uni.reLaunch({
								url: '/pages/student/home/index'
							});	
						},2000)
						
					}
					
				}
			});
		}
	}
}
</script>

<style lang="scss">

	.u-safe-area-inset-bottom{
		padding: 0;
	}
	.info {
		padding-bottom: 20rpx;
		border-bottom: 1rpx #120f6d solid;
		margin-top: 20rpx;
	}
	.bj{
		width: 200rpx;
		float: left;
		margin-left: 90rpx;
		margin-top: 30rpx;
		font-weight: bold;
		font-size: 40rpx;
		color: #0055ff;
		text-decoration: underline;
	}
	.toptitle {
		margin-top: 100rpx;
		font-weight: bold;
		font-size: 60rpx;
		color: aquamarine;
		text-align: center;
	}
	.backicon {
		background-image: url("data:image/svg+xml,%3Csvg t='1689146294791' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='19508' width='200' height='200'%3E%3Cpath d='M501.30944 464.22016c0-19.99872-16-35.19488-35.99872-35.99872H310.4V350.62784L137.61536 464.22016l171.98592 113.59232V500.21888h155.70944c19.99872-0.79872 35.99872-16 35.99872-35.99872z' fill='%23005CFF' p-id='19509'%3E%3C/path%3E%3Cpath d='M886.38464 212.01408c0-39.46496-31.99488-71.45984-71.45984-71.45984H443.88864c-39.46496 0-71.45984 31.99488-71.45984 71.45984v117.69856a29.42464 29.42464 0 1 0 58.84928 0V225.00352a25.6 25.6 0 0 1 25.6-25.6h358.05184c2.72384 0 5.23264 0.88576 7.296 2.3552l-252.50816 91.904c-15.872 5.77536-28.74368 29.28128-28.74368 52.49536v382.88384H456.87808a25.6 25.6 0 0 1-25.6-25.6V598.7328a29.42464 29.42464 0 1 0-58.84928 0v117.69856c0 39.46496 31.99488 71.45984 71.45984 71.45984h97.08544v62.68928c0 23.21408 12.86656 37.3504 28.74368 31.57504l287.42144-104.61184c15.872-5.77536 28.74368-29.28128 28.74368-52.49536v-0.39424c0.3072-2.69824 0.50688-5.43232 0.50688-8.2176v-504.4224z' fill='%23005CFF' p-id='19510'%3E%3C/path%3E%3C/svg%3E");
		background-size: cover;
		width: 50rpx;
		height: 50rpx;
		margin-top: 6rpx;
		margin-left: 12rpx;
	}
	
	.back {
		position: fixed;
		width: 80rpx;
		margin-top: 10rpx;
		height: 60rpx;
		margin-left: -640rpx;
		border-radius: 80rpx;
		border: 1rpx #c6c6c6 solid;
		backdrop-filter: blur(5px); /* 设置高斯模糊效果 */
		background-color: rgba(255, 255, 255, 0.9);
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	page {
		/* background-color: #eeeeee; */
		background: linear-gradient(to top, #55aaff 0%, #120f6d 100%);
		background-size: 100% 200%;
		animation: aurora 10s infinite;
		
	}
	@keyframes aurora {
	  0% {
	    background-position-y: 0;
	  }
	  50% {
	    background-position-y: 100%;
	  }
	  100% {
	    background-position-y: 0;
	  }
	}
	
	// 顶部按钮
	.top-btn{
		display: inline-block;
		float: right;
		font-weight: bolder;
		font-size: larger;
	}
	// 考勤状态按钮
	.btn-u{
		display: inline-block;
		margin-left: 20rpx;
		font-weight: bold;
	}
	// 考勤信息
	.info-top{
		font-weight: bolder;
		margin-left: 10rpx;
		}
	// 顶部班级
	.top{
		width: 100%	;
		height: 96rpx;
	}
	// 按钮按下之后样式
	.btn-hover {
	   border-bottom-right-radius: 50px;
	   border-top-left-radius: 50px;
	   border-bottom-left-radius: 10px;
	   border-top-right-radius: 10px;
	}
	// 页脚统计框
	.footer{
		background-color: white;
		height: 20rpx;
		color: #848484;
	}
	.footer-info{
		line-height: 20rpx;
		margin-left: 6%;
		font-weight: bolder;
	}
	
</style>
